<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- <!DOCTYPE html/> -->
<html>
<head>
    <meta charset="utf-8">
    <title>数据可视化案例1</title>
    <script src="v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>

    <script src="https://code.hcharts.cn/highcharts/highcharts.js"></script>
</head>
<body>
<div id="app">
    <!--    <button onclick="loadG()">刷新</button>-->
    <div id="container" style="max-width:800px;height:400px"></div>
</div>


<script type="text/javascript">
    var chart = Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '不同用户类型所占比例',
            align: 'center'
        },
        tooltip: {
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.1f}%</b>'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: []
    });

    function loadG() {
        chart.showLoading("Loading....");
        var userCount = []
        var userType = []
        axios.post('http://localhost:8080/api/user-count/count-user-number').then(function (res) {
            if (res.data.code === 1) {
                data = res.data.data
                datalength = res.data.data.length
                for (i = 0; i < datalength; i++) {
                    userCount[i] = data[i].userCount
                    userType[i] = data[i].userType
                }
                var userCountseries = {
                    name: userType,
                    data: userType.map(function(type, index) {
                        return [type, userCount[index]]; // 将 userType 和 userCount 组合成 [类型, 数量] 的形式
                    })
                }
                chart.addSeries(userCountseries)

                // 将 userType 和 userCount 组合成 [类型, 数量] 的形式
                var seriesData = userType.map((type, index) => [type, userCount[index]]);
                var userCountseries1 = {
                    type: 'pie',
                    name: 'Browsers', // 系列名称
                    data: seriesData
                };
                console.log(userCountseries1.data);
                chart.addSeriesAsDrillData(userCountseries1, 'browsers');
            } else {
                window.alert(res.data.msg)
            }
        }).catch(function (err) {
            console.log("请求失败");
        })
        chart.hideLoading("Loading....");
    }

    // 自执行函数
    (function () {
        loadG()
    })();

</script>
</body>
</html>
</body>
</html>